<template>
<div>

  <van-sticky>
    <van-nav-bar @click-left="onClickLeft" title="闲置列表" left-text="返回" left-arrow>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
  </van-sticky>

  <van-list
      :immediate-check="false"
      v-model="loading"
      :finished="finished"
      :error.sync="error"
      finished-text="没有更多了"
      error-text="请求失败，点击重新加载"
      @load="onLoad"
  >
    <div class="listBox">
      <div class="Box" @click="getDoods(item.goods_id)" v-for="(item,index) in list" :key="index"  >
       <div class="imgbox">
         <img :src="item.goods_big_logo==''?src:item.goods_big_logo" alt="">
       </div>
       <div class="text">
         {{item.goods_name}}
       </div>
       <div class="minbox">
         <div class="minleft">
           <img :src="item.goods_small_logo==''?src:item.goods_small_logo" alt="">
           <span>{{item.goods_price}}</span>
         </div>
         <div class="minright">
           <div class="box">
             <van-icon name="good-job-o" />{{item.goods_number}}
           </div>
         </div>
       </div>
     </div>
    </div>
  </van-list>

</div>
</template>

<script>
import {getSearch} from "@/api/getfun";
export default {
  name: "list",
  data() {
    return{
      src:'http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_800x800.jpg',
      list:[],
      id:0,
      error: false,
      loading: false,
      finished: false,
      pagenum:1,//当前页数
      pagesize:20,//返回的数据
      total:0,//总数据
      PageCount:0,//总页数
    }
  },
  created() {
    this.id=this.$route.query.id;
    getSearch({
      params:{
        cid:this.id,
        pagenum:this.pagenum,
        pagesize:this.pagesize,
      }
    }).then(res=>{
      let {total,goods,pagenum}=res.data.message
      this.PageCount=Math.ceil(eval((total)/(goods.length)));//数一下有好多页数据
      this.total=total;//总数据
      this.list=goods;//一条数据
      this.pagenum=pagenum
    })
  },
  methods: {
    onLoad(){
      getSearch({
        params:{
          cid:this.id,
          pagenum:this.pagenum++,
        }
      }).then(res=>{
        let {goods}=res.data.message
        this.list=[...this.list,...goods]
        this.loading = false;//加载结束
      }).catch(err=>{
        this.error = true;
      })
      if(this.list.length==this.total){
            this.finished = true;
      }
    },
    onClickLeft(){this.$router.back()},
    getDoods(id){
        this.$router.push({
          path:'/details',
          query:{
            id,
          }
        })
    }
  }
}
</script>

<style scoped lang="scss">
.listBox{
  width:100%;
  -webkit-column-count:2;
  -webkit-column-gap: 0px;
}
.Box{
  -webkit-column-break-inside: avoid;
  display:flex;
  border-radius:10px;
  margin:10px;
  padding:10px;
  justify-content:flex-start;
  overflow:hidden;
  box-shadow:
      4.5px 4.7px 2.2px rgba(0, 0, 0, 0.005),
      6.9px 7.2px 5.3px rgba(0, 0, 0, 0.011),
      9px 9.4px 10px rgba(0, 0, 0, 0.02),
      11.4px 11.9px 17.9px rgba(0, 0, 0, 0.032),
      15.1px 15.7px 33.4px rgba(0, 0, 0, 0.059),
      25px 26px 80px rgba(0, 0, 0, 0.16)
;
  flex-direction:column;
  margin:8px 4px;
  .imgbox{
    width:100%;
    height:100%;
    img{
      border-radius:10px;

      width: 100%;
      height: 100%;
    }
  }
  .text{
    text-indent:.1em;
    padding:10px 0;
    font-size:20px
  }
  .minbox{
    display: flex;
    justify-content:space-between;
    .minleft{
      img{width:24px;height:24px;border-radius:50%;border:1px rgba(0,0,0,.3) solid}
      span{font-size:18px;position: relative;top:-6px;left:6px}
    }
    .minright{
      align-items: center;
      text-align: center;
      display:flex;
      font-size:18px;
      justify-content:space-between;
      .box{
        margin-right:4px;
        padding:2px 10px;
        border:1px silver solid;
        border-radius:20px;
      }
    }

  }

}
</style>